<template>
  <ul class="game-wrap">
    <li v-for="(item, index) in gamelist" :key="item.id">
      <img
        :src="item.url"
        alt=""
        class="icon-game"
        @click="handleclick(item.id)"
      />
      <div class="info-wrap">
        <h2>
          <span>{{ item.title }}</span>

          <van-popover
            v-model:show="showPopover[index]"
            :actions="actions"
            @select="onSelect(index, item.id)"
            placement="left"
            theme="dark"
            :key="item.id"
          >
            <template #reference>
              <span class="unload">:</span>
            </template>
          </van-popover>
        </h2>
        <p class="time">
          <img src="@\assets\images\time.png" alt="" />
          游戏时长11.2小时
        </p>
        <div class="start-wrap">
          <span><img src="@\assets\images\xinxi.png" alt="" />论坛</span>
          <button>启动</button>
        </div>
        <div class="hot">
          <button>
            可莉登场 🔥
            <van-icon name="arrow" />
          </button>
          <button>
            礼包兑换领取
            <van-icon name="arrow" />
          </button>
          <img src="@\assets\images\like.png" alt="" />
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { computed, onMounted, reactive, nextTick } from "vue";
export default {
  setup() {
    const store = useStore();

    let arr = JSON.parse(localStorage.getItem("id"));
    const getGameList = () =>
      store.dispatch("getGameList", {
        ids: arr,
      });

    const removeGame = (id) =>
      store.commit("removeGame", {
        id: id,
      });
    const gamelist = computed(() => store.state.mygame.gamelist);
    const showPopover = reactive([]);

    onMounted(() => {
      if (localStorage.getItem("id")) {
        getGameList().then(async () => {
          await nextTick();

          //根据gamelist数组长度来确定showPopover数组长度，以达到单独显示的目的
          for (let i = 0; i < gamelist.value.length; i++) {
            showPopover.push(false);
          }
        });
      }
    });

    // 通过 actions 属性来定义菜单选项
    const actions = [{ text: "卸载" }];
    const onSelect = (i, id) => {
      showPopover[i] = true;
      removeGame(id);
    };

    const router = useRouter();
    const handleclick = (id) => {
      router.push("/details/" + id);
    };

    return {
      getGameList,
      gamelist,
      actions,
      onSelect,
      showPopover,
      removeGame,
      handleclick,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/var.less";
.game-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 138px;
  bottom: 57px;
  overflow: auto;
  li {
    width: 100%;
    height: 160px;
    padding: 16px 14px 0 18px;
    color: #999;
    .flex(space-between, flex-start);
    .icon-game {
      width: 86px;
      height: 86px;
    }
    .info-wrap {
      width: 246px;
      height: 100%;
      border-bottom: 1px solid #ccc;
      h2 {
        .flex(space-between,center);
        font-size: 18px;
        height: 26px;
        color: #333;
        .unload {
          color: #999;
        }
      }
      .time {
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        img {
          width: 13px;
          height: 13px;
          vertical-align: middle;
        }
      }
      .start-wrap {
        height: 30px;
        margin-top: 3px;
        .flex(flex-end, center);
        span {
          color: #34c3c4;
          font-size: 15px;
          font-weight: 900;
          .flex();
          img {
            width: 14px;
            height: 12px;
            vertical-align: middle;
            margin-right: 3px;
          }
        }
        button {
          width: 75px;
          height: 30px;
          border: none;
          color: #fff;
          font-size: 17px;
          border-radius: 15px;
          background-color: #34c3c4;
          margin-left: 16px;
        }
      }
      .hot {
        height: 28px;
        margin-top: 13px;
        .flex(space-between, center);
        button {
          width: 104px;
          height: 28px;
          border: none;
          border-radius: 14px;
          color: #999;
          font-size: 12px;
          .flex(space-between, center);
          padding: 0 9px;
        }
        img {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
}
</style>
